<template>
  <view class="contentList">
    <view class="contentNode" v-for="(item ,index) in taskList" :key="index" @tap="jumpTo(item)">
      <view class="titleNode">
        <view class="title">{{ item.job_name || '' }}</view>
        <view class="price">{{ item.salary || '' }}</view>
      </view>
      <view class="subTitleNode">
        <view>{{ item.area || ''}}</view>
        <view>{{ item.settlement_method || ''}}</view>
      </view>
      <view class="flex flex-wrap">
        <view class="tag" v-for="(tag, index) in item.tag" :key="index">
         <!-- <view class="cu-tag light radius" :style="'background-color:'+tag.tag_color+';color:'+tag.text_color">
            {{ tag.tag_name || ''}}
          </view> -->
		  <view class="cu-tag light radius line-gray" style="line-height: 20px;">
		     {{ tag.tag_name || ''}}
		   </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapMutations,mapState} from 'vuex';
import { getJobInfo } from '../api/user';
export default {
  name: "Task",
  props: {
    taskList: {
      type: Array,
      default: function() {
        return [];
      }
    },
	status:''
  },
  methods:{
    jumpTo(data) {
		let token = uni.getStorageSync('authorization').token
	  if(token && token != 'undefined' ){
			uni.navigateTo({
			  url: `/pages/taskDetails/index?taskDetail=${encodeURIComponent(JSON.stringify(data))}&is_part_time=${this.is_part_time}`
			});  
		}else{
			getJobInfo()
		}  
    },
  },
  computed: mapState(['hasLogin','uerInfo']),
};
</script>

<style scoped>
.contentList {
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

.contentNode {
  border: none;
  border-top: 1px solid #f5f5f5;
  padding: 20px 0;
  /* display: flex;
  flex-direction: column; */
}

.titleNode {
  display: flex;
  justify-content: space-around;
}

.title {
  flex: 2;
  display: flex;
  justify-content: flex-start;
  font-size: 16px;
  font-weight: bold;
  color: rgba(68, 68, 68, 1);
  line-height: 22px;
}

.price {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  font-size: 16px;
  font-weight: 500;
  color: rgba(16, 137, 255, 1);
  line-height: 22px;
}

.subTitleNode {
  display: flex;
  justify-content: flex-start;
}

.subTitleNode view {
  margin-right: 5px;
  font-size: 14px;
  font-weight: 500;
  color: rgba(136, 136, 136, 1);
  line-height: 20px;
}

.titleNode,
.subTitleNode {
  margin-bottom: 8px;
}

.tag {
  margin-right: 5px;
}
.tagstyle {
	
	height:18px;
	border-radius:4px;
	border:1px solid rgba(232,232,232,1);
}
</style>
